<template>
    <div class="iframe-container">
        <iframe
                :src="url"
                :width="width"
                :height="height"
                frameborder="0"
                security="restricted"  sandbox="allow-scripts allow-same-origin allow-popups"
                allowfullscreen
        ></iframe>
    </div>
</template>

<script>
    export default {
        name: 'IframeComponent',
        props: {
            url: {
                type: String,
                required: true,
            },
            width: {
                type: String,
                default: '100%',
            },
            height: {
                type: String,
                default: '100px',
            },
        },
    };
</script>

<style scoped>
    .iframe-container {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        height: 0;
    }
    .iframe-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>
